<template>
    <div class="all__body" ref="scrollRef" @scroll="handScrollFunc" >
    <div>
        
        <Waterfall :lazyload="false" :breakpoints="breakpoints" :gutter="10" :list="list" @load="loadMore">
                <template #item="{ item, url, index }">
                    <div class="card_content"  @click="click_record(item)" ref="videoPlayers" 
                    @mouseenter="playVideo(index, item)"@mouseleave="pauseVideo(index, item)">

                    <div  v-if="item.state==3 && item.result_list[0].file_type=='png'" class="card_img water__items">
                        <LazyImg class="cover" :url="item.result_list[0].path_url" />
                    </div>
                    <div class="water__items video__contains" v-else-if="item.state==3 && item.result_list[0].file_type=='mp4'">
                        <video muted :src="item.result_list[0].path_url" style="width: 100%; height: 100%; object-fit: contain;"></video>
                        <span class="video__icon"><svg-icon name="icon-shipin" :size="30"></svg-icon></span>
                    </div>

                    <div class="water__items audio__contains" v-else-if="item.state==3 && item.result_list[0].file_type=='mp3'">
                        <audio :src="item.result_list[0].path_url" controls style="width: 100%; object-fit: contain;"></audio>
                    </div>

                    <div class="water__items" v-else-if="item.state==-1">
                        
                        <div class="fail__box">
                            生成失败！
                        </div>
                    </div>

                    <div class="water__items" v-else-if="item.state==1">
                        
                        <div class="wait__box">
                            排队中
                        </div>
                    </div>

                    <div class="water__items" v-else-if="item.state==2">
                        
                        <div class="generate__box">
                            生成中
                        </div>
                    </div>

                    <div class="water__items" v-else>
                        
                        <div class="unknow__box">
                            未知状态
                        </div>
                    </div>


                    
                    </div>
                </template>
            </Waterfall>

        
      </div>

      <div v-if="!ableLoadMore" class="scroll__botton">已经加载全部~</div>

      <RecordDialog
            @cancel="cancel"
            :visible="isVisible"
            :instance="click_instance"
        ></RecordDialog>
      </div>
</template>
           
<script setup>
    import { ref, onMounted } from "vue"
    import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
    import RecordDialog from '../public/RecordDialog.vue'
    import 'vue-waterfall-plugin-next/dist/style.css'
    import {getGenerate} from '@/api/homeApi.js'
    import { useUserStore } from '@/stores/user'

    const userStore = useUserStore()

    const isVisible = ref(false)
    const click_instance = ref({})
    
    const breakpoints = ref({
      1600: {
        rowPerView: 5,
      },
      1200: {
        rowPerView: 4,
      },
      800: {
        rowPerView: 2,
      },
    })

    const list = ref([])

    const currentPage = ref(1)
    const pageSize = ref(30)
    const total = ref(0)
    
    const ableLoadMore = ref(true)
    const scrollRef = ref(null)
    const loading = ref(false)

    function click_record(instance){
      isVisible.value = true
      click_instance.value = instance
    }

    function cancel(){
      isVisible.value = false
    }

    const handScrollFunc = ()=>{
      if (ableLoadMore.value && scrollRef.value.scrollHeight - (scrollRef.value.scrollTop + scrollRef.value.clientHeight) <= 10){
          loadMore()
      }
    }

    // 获取生成记录
    const getGenerateList = async ()=>{
        var req_data = {
            page: currentPage.value,
            page_size: pageSize.value
        }

        var res = await getGenerate(req_data)
        var res_data = res.data

        list.value = [...list.value, ...res_data.list]
        total.value = res_data.total
        if(total.value <= list.value.length){
            ableLoadMore.value = false
        }
        // console.log(list.value)
    }

    function loadMore(){
        console.log('loadMore')
        
        
        try{
           setTimeout(()=>{
              if (loading.value) return
              loading.value = true
              currentPage.value += 1

              getGenerateList()

           }, 100)
        } catch(error) {
            console.log(error)
        } finally{
            loading.value = false
        }
    }

    const playVideo = (index, item) => {

        if (item.state==3 && item.result_list[0].file_type=='mp4'){
            var dom_list = document.getElementsByClassName('water__items')
            var video = dom_list[index].getElementsByTagName('video')[0]
        
            // console.log('播放', dom_list[index], video)
            video.loop = true
            video.play()
            
        }

    };

    const pauseVideo = (index, item) => {
        if (item.state==3 && item.result_list[0].file_type=='mp4'){
            var dom_list = document.getElementsByClassName('water__items')
            var video = dom_list[index].getElementsByTagName('video')[0]
        
            video.pause()
            // video.currentTime = 0;
            
        }
    };

    onMounted(()=>{
        if (userStore.isLoggedIn){
            getGenerateList()
        }else{
            userStore.goLogin()
        }
        
    })
    
</script>
<style scoped lang="scss">
.water__items{
    position: relative;
    background-color: var(--wchime-bg-color-box);
    .time__span{
        width: 100%;
        position: absolute;
        bottom: 5px;
        left: 0;
        font-size: 14px;
        color: #fff;

    }
}
.card_content{
        cursor: pointer;
        
        .card_img{
            border: solid 1px var(--wchime-color-border);
            border-radius: 6px;
            overflow: hidden;
        }
        video{
            border: solid 1px var(--wchime-color-border);
            border-radius: 6px;
        }
        .fail__box{
            border: solid 1px var(--wchime-color-border);
            height: 200px;
            border-radius: 6px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ff0000;
        }
        .wait__box{
            border: solid 1px var(--wchime-color-border);
            height: 200px;
            border-radius: 6px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #bcb23e;
        }
        .generate__box{
            border: solid 1px var(--wchime-color-border);
            height: 200px;
            border-radius: 6px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #4c76e8;
        }
        .unknow__box{
            border: solid 1px var(--wchime-color-border);
            height: 200px;
            border-radius: 6px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #6c7070;
        }
        .video__contains{
            position: relative;
            .video__icon{
                position: absolute;
                top: 5px;
                right: 5px;
            }
        }

        .audio__contains{
            border: solid 1px var(--wchime-color-border);
            height: 150px;
            border-radius: 6px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    }
.all__body{
    height: 100%;
    width: 100%;
    // overflow-y: scroll;
    // .card_content{
    //     border: 1px solid rgb(131, 128, 128);
    //     border-radius: 10px;
    //     }
    // .cover {
    //     border-radius: 10px;
    // }
    .scroll__botton{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
}
</style>